/**
 * @name AreaMarkers
 * @author darcrand
 * @desc 珠海各区中心描点
 */

import React from 'react'
import { Marker } from 'react-amap'
import './styles.scss'

const areaMarkerList = [
    { name: '香洲区', longitude: '113.490926', latitude: '22.491467' },
    { name: '金湾区', longitude: '113.357717', latitude: '22.126835' },
    { name: '斗门区', longitude: '113.268453', latitude: '22.217129' }
]

const AreaMarker = ({ name, handleClick }) => (
    <div classes="area-marker">
        <div classes="marker-ico" onClick={handleClick} />
        <span classes="marker-tips">{name}</span>
    </div>
)

const AreaMarkers = (showAreaMarkers, onAreaClick) => {
    return (
        showAreaMarkers &&
        areaMarkerList.map((v, i) => (
            <Marker key={`area-${i}`} position={{ longitude: v.longitude, latitude: v.latitude }}>
                <AreaMarker
                    name={v.name}
                    handleClick={() => onAreaClick({ longitude: v.longitude, latitude: v.latitude })}
                />
            </Marker>
        ))
    )
}

export default AreaMarkers
